<!-- 角色=> 企业  -- 征信报告 -->
<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="ApplyCreditScore()"> 构建风控策略模型 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="ShowReportDestail(row)"> 查看详情 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <ReDialog :width="800" :height="500" :models="CreditVisible" @Closes="CloseVisible()">
    <template #header>
      <h2 style="text-align: center;">制定风控策略</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <el-form :model="formData" label-width="150px">
          <el-form-item label="模型名称：">
            <el-input placeholder="策略名称" v-model.trim="formData.modelName" class="!w-[300px]" />
          </el-form-item>
          <el-form-item label="客户类型：" prop="legalName">
            <el-radio-group v-model="formData.customerType" class="ml-4">
              <el-radio label="CompanyCustomers" size="large">存量信贷公司客户</el-radio>
              <el-radio label="RetailCustomers" size="large">存量信贷零售客户</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="formData.customerType == 'CompanyCustomers'">
            <div v-for="(item, index) in companyList.financialIndicatorsList" style="margin-bottom: 60px">
              <el-form-item label="企业重大负面舆情：">
                <el-checkbox-group v-model="item.finanItems">
                  <el-checkbox v-for="(t) in companySelectData.CompanyNegativePublicOpinionSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyFinan(t, item.indexInfos)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.indexInfos">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:150px;margin-left:30px">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <el-form-item label="响应策略：">
                <el-select v-model="item.responsesStrategy" class="!w-[300px]">
                  <el-option v-for="type in companySelectData.responsesStrategysList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
            </div>


            <!-- 外部评级下降 -->
            <div v-for="(item, index) in companyList.competitiveIndicatorsList" style="margin-bottom: 60px">
              <el-form-item label="外部评级下降：">
                <el-checkbox-group v-model="item.finanItems">
                  <el-checkbox v-for="(t) in companySelectData.ExternalRatingDowngradeSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyFinan1(t, item.indexInfos)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.indexInfos">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:150px;margin-left:30px">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <el-form-item label="响应策略：">
                <el-select v-model="item.responsesStrategy" class="!w-[300px]">
                  <el-option v-for="type in companySelectData.responsesStrategysList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
            </div>
            <!-- 财务指标恶化 -->
            <div v-for="(item, index) in companyList.creditIndicatorsList" style="margin-bottom: 60px">
              <el-form-item label="财务指标恶化：">
                <el-checkbox-group v-model="item.finanItems">
                  <el-checkbox v-for="(t) in companySelectData.DeteriorationFinancialIndicatorsSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyFinan1(t, item.indexInfos)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.indexInfos">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft1">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft1">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:150px;margin-left:30px">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <el-form-item label="响应策略：">
                <el-select v-model="item.responsesStrategy" class="!w-[300px]">
                  <el-option v-for="type in companySelectData.responsesStrategysList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addCompanyNegativePublicOpinion()" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;"
                @click="addCompanyNegativePublicOpinion()">添加企业重大负面舆情风控策略模型</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addExternalRatingDowngrade()" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;"
                @click="addExternalRatingDowngrade()">添加外部评级下降风控策略模型</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addDeteriorationFinancialIndicators()" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;"
                @click="addDeteriorationFinancialIndicators()">添加财务指标恶化风控策略模型</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteCompany()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteCompany()">删除策略模型</span>
            </div>
          </div>

          <!-- 个人征信逾期 -->
          <div v-if="formData.customerType == 'RetailCustomers'">
            <div v-for="(item, index) in retailList.financialIndicatorsList" style="margin-bottom: 30px">
              <el-form-item label="个人征信逾期：">
                <el-checkbox-group v-model="item.finanItems">
                  <el-checkbox v-for="(t) in retailSelectData.CompanyNegativePublicOpinionSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyFinan1(t, item.indexInfos)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.indexInfos">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:150px;margin-left:30px">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <el-form-item label="响应策略：">
                <el-select v-model="item.responsesStrategy" class="!w-[300px]">
                  <el-option v-for="type in retailSelectData.responsesStrategysList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addPersonalCreditOverdue()" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;"
                @click="addPersonalCreditOverdue()">添加个人征信逾期风控策略模型</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteCustomer()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteCustomer()">删除策略模型</span>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitVisible()" :loading="BtnLoading" type="primary">确定</el-button>
        <el-button @click="CloseVisible()"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- 策略详情 -->

  <ReDialog :width="800" :height="500" :models="detailVisible" @Closes="detailVisible = false">
    <template #header>
      <h2 style="text-align: center;">风控策略详情</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <el-form :model="formData" label-width="150px">
          <el-form-item label="策略名称：">
            {{ showTittle }}
          </el-form-item>
          <el-form-item label="客户群类型：" prop="legalName">
            {{ showType == 'CompanyCustomers' ? '存量信贷公司客户' : '存量信贷零售客户' }}
          </el-form-item>
          <div v-if="showType == 'CompanyCustomers'">
            <!-- 企业重大负面舆情 -->
            <div v-for="(item, index) in showList" style="margin-top:40px">
              <div style="margin-bottom: 50px" v-if="item.modelCode == 'CompanyNegativePublicOpinion'">
                <el-form-item label="企业重大负面舆情：">
                  <div class="div-wrapper">
                    <div v-for="a in item.indexInfos" class="custom-div">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="响应策略：">
                  {{ item.responsesStrategy }}
                </el-form-item>
              </div>
              <div style="margin-bottom: 50px" v-if="item.modelCode == 'ExternalRatingDowngrade'">
                <!-- 外部评级下降 -->
                <el-form-item label="外部评级下降：">
                  <div class="div-wrapper">
                    <div v-for="a in item.indexInfos" class="custom-div">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="响应策略：">
                  {{ item.responsesStrategy }}
                </el-form-item>
              </div>
              <div style="margin-bottom: 50px" v-if="item.modelCode == 'DeteriorationFinancialIndicators'">
                <!-- 财务指标恶化 -->
                <el-form-item label="财务指标恶化：">
                  <div class="div-wrapper">
                    <div v-for="a in item.indexInfos" class="custom-div">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="响应策略：">
                  {{ item.responsesStrategy }}
                </el-form-item>
              </div>
            </div>
          </div>

          <!-- 个人征信逾期 -->
          <div v-if="showType == 'RetailCustomers'">
            <div v-for="(item, index) in showList" style="margin-top:40px">
              <el-form-item label="个人征信逾期：">
                <div class="div-wrapper">
                  <div v-for="a in item.indexInfos" class="custom-div">
                    {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="响应策略：">
                {{ item.responsesStrategy }}
              </el-form-item>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
    </template>
  </ReDialog>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled,
  RemoveFilled
} from "@element-plus/icons-vue";
import { useRiskStrategic } from "./hook/riskStrategic";
import { ref, reactive, nextTick, watch } from "vue";
const {
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  formData,
  handleCurrentChange,
  handleSizeChange,
  ApplyCreditScore,
  SubmitVisible,
  CloseVisible,
  companyList,
  retailList,
  companySelectData,
  retailSelectData,
  operationListInput,
  operationListSelect,
  changeSelectCompanyFinan,
  addCompanyNegativePublicOpinion,
  changeSelectCompanyFinan1,
  addExternalRatingDowngrade,
  changeSelectCompanyFinan2,
  addDeteriorationFinancialIndicators,
  changeSelectCompanyFinan3,
  addPersonalCreditOverdue,
  ShowReportDestail,
  BtnLoading,
  showList,
  showType,
  showTittle,
  showVisible,
  detailVisible,
  deleteCustomer,
  deleteCompany,
} = useRiskStrategic()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.iocn {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: #409Eff;
}

.delete_icon {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: red;
}

.selectLeft {
  width: 150px;
  margin-left: 155px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
}

.selectLeft1 {
  width: 400px;
  margin-left: 155px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
}

.dialog-footer {
  margin: 0 auto;
  display: block;
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

.div-wrapper {
  display: inline-block;
}

.div-wrapper .custom-div {
  text-align: start;
  margin-right: 10px;
  /* 可适当调整间距大小 */
  margin-bottom: 10px;
  /* 可适当调整间距大小 */
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}
</style>
